import { WorkflowRunningStatus } from '@/components/workflow/types'
import { LoadingOutlined } from '@ant-design/icons'

const errorSvg = (
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle cx="8" cy="8" r="7" fill="#FA514B" />
    <path
      d="M5.87891 5.87891L10.1215 10.1215"
      stroke="white"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M5.87891 10.1211L10.1215 5.87845"
      stroke="white"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
)
const ResultStatus = ({ type, text = '' }) => {
  let component = <div></div>
  if (type === WorkflowRunningStatus.Succeeded) {
    component = (
      <div className="flex items-center">
        <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="8" cy="8" r="7" fill="#3EC254" />
          <path
            d="M10.9668 6.81055L7.81031 9.96703L5.99952 8.15624"
            stroke="white"
            strokeWidth="1.5"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
        <span className="node-result-text" style={{ marginLeft: '4px' }}>
          {text || '运行成功'}
        </span>
      </div>
    )
  } else if (type === WorkflowRunningStatus.Invalid) {
    component = (
      <div className="flex items-center">
        {errorSvg}
        <span className="node-result-text" style={{ marginLeft: '4px' }}>
          {'校验失败，请检查配置后重新运行'}
        </span>
      </div>
    )
  } else if (type === WorkflowRunningStatus.Running) {
    component = (
      <div className="flex items-center">
        <LoadingOutlined />
        <span className="node-result-text" style={{ marginLeft: '4px' }}>
          {text || '运行中'}
        </span>
      </div>
    )
  } else if (type === WorkflowRunningStatus.Failed) {
    component = (
      <div className="flex items-center">
        {errorSvg}
        <span className="node-result-text" style={{ marginLeft: '4px' }}>
          {text || '运行失败'}
        </span>
      </div>
    )
  } else {
    component = (
      <div className="flex items-center">
        <span className="node-result-text" style={{ marginLeft: '4px' }}>{`未知类型：${type}`}</span>
      </div>
    )
  }

  return <>{component}</>
}

export default ResultStatus
